<template>
	<view id="joinOpusMap">
		<!-- #ifdef MP-WEIXIN -->
		<view class="topTitle" style="margin-top: 30rpx;">
			<u-navbar :safeAreaInsetTop="true" :fixed="false" leftIcon="close" left-text="选择作品集" @leftClick="leftClick"
				right-text="新建作品集" @rightClick="rightClick">
			</u-navbar>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="topTitle">
			<u-navbar :safeAreaInsetTop="true" :fixed="false" leftIcon="close" left-text="选择作品集" @leftClick="leftClick"
				right-text="新建作品集" @rightClick="rightClick">
			</u-navbar>
		</view>
		<!-- #endif -->


		<view class="TAOpusList">
			<view class="opustList" v-for="(item, index) in opusList" :key="index">
				<view class="fdbsahj">
					<view class="checkboxContainer">
						<checkbox :value="item.id" v-model="selectedOpus" @click="tabsChange(item.id, item.title)" />
					</view>
					<view class="checkboxImg">
						<image :src="item.cover" mode=""></image>
					</view>
				</view>


				<view class="opusText">
					<view class="title">{{ item.title }}</view>
					<view class="content">{{ item.content }}</view>
				</view>
			</view>
			<view class="" style="margin-top: 200rpx;">
				<u-empty  v-if="opusList.length == 0" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			</view>
			
		</view>
		<view class="" style="height: 120rpx;">
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="customer">
			<u-button :ripple="true" ripple-bg-color="rgba(0, 0, 0, 0.15)"
				color="linear-gradient(to right, rgb(253, 142, 26), rgb(255, 102, 0))" :hair-line="false" shape="circle"
				mode="dark" @click="Submit">
				确定
			</u-button>
		</view>
		<!-- #endif -->
		<!-- #ifdef  H5 -->
		<view class="scenery">
			<u-button style="background: linear-gradient(180deg, #FD8E1A 0%, #ff6600 100%);" type="error" :ripple="true"
				ripple-bg-color="rgba(0, 0, 0, 0.15)" :hair-line="false" shape="circle" mode="dark" @click="Submit"
				class="btn">
				确定
			</u-button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				id: '',
				opusList: [],
				selectedOpus: [],
				selectedIds: '', // 用于保存选中的ID
				selectedTitles: '' // 用于保存选中的标题
			}
		},
		onLoad(option) {
			this.getList();
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			leftClick() {

				uni.reLaunch({
					url: "/pages/posts/posts?upadId=" + this.id
				});
			},
			rightClick() {
				uni.navigateTo({
					url: "/pages/home/PersonalData/newOpusList"
				})
			},
			getList() {
				this.$api.getList({
					uuid: this.userInfo.id
				}).then(res => {
					this.opusList = res.data;
					console.log("this.opusList", this.opusList)
				})
			},
			tabsChange(id, title) {
				const index = this.selectedOpus.indexOf(id);

				if (index !== -1) {
					this.selectedOpus.splice(index, 1);
					this.selectedIds = JSON.stringify(this.selectedOpus)
					if (this.selectedIds.startsWith('[') && this.selectedIds.endsWith(']')) {
						this.selectedIds = this.selectedIds.slice(1, -1);
					}

					console.log(this.selectedIds, 'this.selectedIds')
					this.selectedTitles = this.removeItemFromStrings(this.selectedTitles, title);

				} else {
					this.selectedOpus.push(id);
					this.selectedIds += (this.selectedIds ? ',' : '') + id;
					this.selectedTitles += (this.selectedTitles ? ',' : '') + title;
				}
			},


			removeItemFromStrings(str, item) {
				const itemsArray = str.split(',').filter(i => i !== item && i.trim() !== '');
				return itemsArray.join(',');
			},


			Submit() {
				uni.$emit('knot', {
					listData: this.selectedIds
				});
				uni.switchTab({
					url: "/pages/posts/posts"
				})
				// console.log(this.selectedIds, this.selectedTitles )
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-navbar__content__right__text {
		color: #ff6600;
	}

	::v-deep .u-navbar__content__left__text {
		font-size: 40rpx;
	}

	::v-deep .u-navbar__content {
		height: 160rpx !important;
	}

	.TAOpusList {
		width: 100%;
	}

	.TAOpusList_title {
		width: 90%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		line-height: 2;

		.opusTile {
			font-size: 50rpx;
		}

		.new {
			color: #ff6600;
			font-size: 35rpx;
		}
	}

	.opustList {
		width: 100%;
		margin: auto;
		padding: 20rpx;
		display: flex;

		.fdbsahj {
			display: flex;
			align-items: center;

			.checkboxContainer {
				margin-right: 10rpx;
			}

			.checkboxImg {
				width: 30%;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
			}
		}

		.opusText {
			width: 70%;
			.title {
				width: 80%;
				font-size: 30rpx;
				word-wrap: break-word;  
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
			}

			.content {
				width: 80%;
				font-size: 28rpx;
				margin: 10rpx 0;
				color: #888;
				word-wrap: break-word;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
			}
		}
	}

	.scenery {
		position: fixed;
		bottom: 0rpx;
		padding: 22rpx 38rpx;
		background-color: #fff;
		width: 90%;
		text-align: center;
		z-index: 999;
	}

	.customer {
		// padding: 30rpx;
		position: fixed;
		bottom: 30rpx;
		margin: auto 10%;
		width: 80%;
		border-radius: 100rpx;
		text-align: center;
		border: 1rpx solid red;
	}
</style>